<script setup lang="ts" name="FormDesign">
    import { Plus, Search } from '@element-plus/icons-vue'
    import type { FormDesign } from './type'
    import Detail from './Detail.vue'
    import Form from './Form.vue'
    import { checkPermission } from '@/utils/permission'


    const baseApi = '/form-design'

    const initQueryParam: FormDesign = {}

    const {
        queryParam,
        loading,
        dataList,
        pagination,
        getList,
        onSearch,
        resetFilter,
        remove,
        batchRemove
    } = useList<FormDesign>({ baseApi, initQueryParam })

    const searchState = ref(false)

    defineExpose({
        refresh: onSearch,
        addCondition: (key: keyof FormDesign, value: any, refresh = false) => {
            queryParam[key] = value
            if (refresh) onSearch()
        },
        addInitCondition: (key: keyof FormDesign, value: any, refresh = false) => {
            initQueryParam[key] = value
            queryParam[key] = value
            if (refresh) onSearch()
        }
    })

    const { initRelatedData, relatedData } = useOption({
    })
    initRelatedData()

    const sortChange = ({ column, prop, order }: { column?: string; prop: string; order: string }) => {
        let orderBy: 'ASC' | 'DESC' | undefined
        switch (order) {
            case 'ascending':
                orderBy = 'ASC'
                break
            case 'descending':
                orderBy = 'DESC'
                break
            default:
                orderBy = undefined
        }
        pagination.orderBy = orderBy ? `${column ?? prop}:${orderBy}` : undefined
        onSearch()
    }


    const formRef = ref()
    const detailRef = ref()

    const handleOperation = (code: string, value?: string | string[]) => {
        switch (code) {
            case 'detail':
                detailRef.value.open(value as string)
                break
            case 'create':
            case 'update':
                formRef.value.open(value as string)
                break
            case 'remove':
                remove(value as string)
                break
            case 'batchRemove':
                batchRemove(value as string[])
                break
            default:
                throw new Error(`不存在的操作编码${code}!`)
        }
    }



    const router = useRouter()

    const activated = () => {
        nextTick(() => {
            const query = router.currentRoute.value.query
            for (const queryKey in query) {
                queryParam[queryKey as keyof FormDesign] = query[queryKey] as any
            }
            
            onSearch()
        })
    }

    router.currentRoute.value.meta.keepAlive ? onActivated(activated) : activated()

</script>

<template>
        <div class="list-page">


            <el-form v-show="searchState" label-width="80px" class="list-search" @submit.prevent>
                <el-row :gutter="18">
                        <el-col :md="8" :sm="24" >
                            <el-form-item prop="formCode" label="表单编码">
                                <el-input
                                        v-model="queryParam.formCode"
                                        placeholder="请输入"
                                        clearable
                                        @change="onSearch"
                                />
                            </el-form-item>
                        </el-col>
                </el-row>
            </el-form>


                <el-space wrap class="list-operation">
                            <el-button
                                    v-has-permission="'create'"
                                    type="primary"
                                    :icon="Plus"
                                       @click="handleOperation('create')">
                                新建
                            </el-button>

                    <el-space>
                            <span v-show="!searchState" class="search">
                                      <el-input
                                              v-model="queryParam.formCode"
                                              placeholder="请输入表单编码"
                                              clearable
                                              @change="onSearch"
                                      />
                            </span>
                            <el-button :icon="Search" type="primary" @click="onSearch">查询</el-button>
                            <el-button title="重置查询条件" @click="resetFilter">重置</el-button>
                    </el-space>
                </el-space>

        <el-table
                ref="tableRef"
                v-loading="loading"
                class="list-body"
                :data="dataList"
                height="100%"
                row-key="id"
                @sort-change="sortChange"
        >
                <el-table-column label="表单编码" prop="formCode" show-overflow-tooltip />
                <el-table-column label="创建人" prop="createByLabel" show-overflow-tooltip />
                <el-table-column label="创建时间" prop="createTime" show-overflow-tooltip />
                <el-table-column label="更新人" prop="updateByLabel" show-overflow-tooltip />
                <el-table-column label="更新时间" prop="updateTime" show-overflow-tooltip />
                <el-table-column label="操作" fixed="right" :width="180">
                    <template #default="{ row }">
                        <el-space>
                                <el-button
                                        v-has-permission="'detail'"
                                        type="primary"
                                        text bg
                                        size="small"
                                        @click="handleOperation('detail', row.id)">
                                    详情
                                </el-button>
                                <el-dropdown v-has-permission="['update', 'delete']" @command="(code: string) => handleOperation(code, row.id)" >
                                    <el-button text bg type="primary" size="small">
                                        更多
                                        <el-icon :size="16" style="margin-left: 5px">
                                            <ArrowDown />
                                        </el-icon>
                                    </el-button>
                                    <template #dropdown>
                                        <el-dropdown-menu>
                                                <el-dropdown-item v-if="checkPermission('update')" command="update">
                                                    <el-button link> 编辑 </el-button>
                                                </el-dropdown-item>
                                                <el-dropdown-item v-if="checkPermission('delete')" command="remove">
                                                    <el-button link type="danger"> 删除 </el-button>
                                                </el-dropdown-item>
                                        </el-dropdown-menu>
                                    </template>
                                </el-dropdown>
                        </el-space>
                    </template>
                </el-table-column>
        </el-table>

        <div style="display: flex; justify-content: space-between">
        <el-pagination
                v-if="pagination.total"
                v-model:current-page="pagination.current"
                v-model:page-size="pagination.pageSize"
                :page-sizes="[10, 15, 20, 30, 50, 100]"
                small
                background
                layout="total, sizes, prev, pager, next, jumper"
                :total="pagination.total"
                @size-change="getList()"
                @current-change="getList()"
        />
        </div>

        <Form ref="formRef" :base-api="baseApi" @complete="getList()" />
        <Detail ref="detailRef" :base-api="baseApi" />
    </div>
</template>

<style scoped>
</style>